<template>
	<i-card top="40rpx">
		<view class="shop_title">
			<text class="title">{{data.serviceName}}</text>
			<text
				:style="{color: data.status === '0' ? '#16161F' : '#FF3D3D'}">{{data.status === '0' ? '已上架' : '已下架'}}</text>
		</view>
		<view class="shop_tag" v-if="data.businessType !== '10003007'">
			<i-price :size="26">{{data.discountPrice}}</i-price>
			<text class="tag_in">¥{{data.price}}</text>
		</view>
		<view class="timer timers" v-if="data.businessType === '10003007'">
			<view class="ygtc">{{data.commissionAmount ? ('员工提成￥ ' + data.commissionAmount + '/L') : ''}}</view>
			<i-buttons v-if="userInfo.isClerk === 0"  color="#5C6D80" @click="eidtTc(data)">提成</i-buttons>
		</view>
		<view class="timer timerss" v-else>
			<view class="ygtc">{{data.commissionAmount ? ('员工提成￥ ' + data.commissionAmount) : ''}}</view>
			<view class="but">
				<i-buttons v-if="userInfo.isClerk === 0" color="#5C6D80" @click="eidtTc(data)">提成</i-buttons>
				<view style="width: 20rpx;"></view>
				<i-buttons v-if="data.businessType !== '10003007'" color="#5C6D80"
					@click="eidtShop(data)">编辑</i-buttons>
			</view>

		</view>
	</i-card>
</template>

<script lang="ts" setup>
	import {
		navTo
	} from '../../utils/common';
	import useStore from '../../stores/index'
	import { computed, defineProps } from 'vue';

	defineProps({
		data: {
			type: Object,
			default: () => {
				return {}
			}
		} as any
	})
	const store = useStore()

	const userInfo = computed(() => {
		return store.userInfo
	})
	const eidtShop = (item : { businessType : string, serviceId : string }) => {
		navTo(`/pages/views/add_shop?businessType=${item.businessType}&goodsId=${item.serviceId}`, 'navigateTo')
	}

	const eidtTc = (item : { serviceId : string; serviceName : string; price : string; discountPrice : string; businessType : string; commissionAmount : number }) => {
		navTo(`/pagesA/views/shop_tanksSetting?serviceId=${item.serviceId}&serviceName=${item.serviceName}&price=${item.price}&dprice=${item.discountPrice}&businessType=${item.businessType}&commissionAmount=${item.commissionAmount || ''}`, 'navigateTo')
	}
</script>

<style lang="scss" scoped>
	.shop_title {
		@include flexRS;
		@include dfont;
		margin-bottom: 8rpx;

		.title {
			@include titlefont(28rpx);
			@include overflow;
			width: 80%;
		}
	}

	.shop_tag {
		margin-bottom: 16rpx;
		@include flexR;

		.tag_in {
			@include dfont(26rpx);
			margin-left: 8rpx;
			text-decoration: line-through;
			color: #a0a0a0
		}
	}

	.shop_price {
		@include flexR;
		@include dfont(24rpx);
		color: #A0A0AD;
	}

	.timer {
		@include flexR;
		justify-content: flex-end;
		@include dfont(24rpx);
		color: #A0A0AD;
	}

	.timerss {
		@include flexRS;

		.but {
			@include flexR;
		}
	}

	.timers {
		@include flexRS;
		margin-top: 24rpx;
	}
</style>